<template>
  <div 
    class="video-component"
    :style="videoStyle"
  >
    <div class="video-container">
      <!-- 视频播放器 -->
      <video
        v-if="componentData.props.src"
        :src="componentData.props.src"
        :autoplay="componentData.props.autoplay"
        :loop="componentData.props.loop"
        :muted="componentData.props.muted"
        :controls="componentData.props.controls"
        class="video-player"
        @loadstart="handleVideoLoad"
        @error="handleVideoError"
      >
        您的浏览器不支持视频播放
      </video>
      
      <!-- 视频占位符 -->
      <div v-else class="video-placeholder">
        <i class="el-icon-video-camera"></i>
        <span>请上传视频或输入视频地址</span>
      </div>
      
      <!-- 视频信息 -->
      <div v-if="componentData.props.src" class="video-info">
        <div class="video-title">{{ componentData.props.title || '视频' }}</div>
        <div class="video-status">
          <span v-if="componentData.props.autoplay" class="status-tag autoplay">自动播放</span>
          <span v-if="componentData.props.loop" class="status-tag loop">循环播放</span>
          <span v-if="componentData.props.muted" class="status-tag muted">静音</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { ComponentConfig } from '../../interface'

// Props
interface Props {
  componentData: ComponentConfig
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  update: [component: ComponentConfig]
  delete: [componentId: string]
}>()

// 计算视频样式
const videoStyle = computed(() => {
  const style = props.componentData.style || {}
  
  const computedStyle = {
    backgroundColor: style.backgroundColor || 'transparent',
    borderColor: style.borderColor || 'transparent',
    borderWidth: (style.borderWidth || 0) + 'px',
    borderRadius: (style.borderRadius || 0) + 'px',
    opacity: style.opacity !== undefined ? style.opacity : 1,
    boxSizing: 'border-box',
    ...style
  }
  
  console.log('VideoComponent: videoStyle computed, style:', style)
  console.log('VideoComponent: final computedStyle:', computedStyle)
  
  return computedStyle
})

// 处理视频加载
const handleVideoLoad = () => {
  console.log('Video loading started')
}

// 处理视频错误
const handleVideoError = (error: Event) => {
  console.error('Video loading error:', error)
}
</script>

<style lang="scss" scoped>
.video-component {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .video-container {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #000;
    border-radius: 4px;
    overflow: hidden;
    
    .video-player {
      width: 100%;
      height: 100%;
      object-fit: cover;
      background-color: #000;
    }
    
    .video-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #909399;
      background-color: #f5f7fa;
      
      i {
        font-size: 48px;
        margin-bottom: 16px;
        color: #c0c4cc;
      }
      
      span {
        font-size: 14px;
        color: #909399;
      }
    }
    
    .video-info {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
      color: white;
      padding: 16px 12px 8px;
      
      .video-title {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 8px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
      }
      
      .video-status {
        display: flex;
        gap: 8px;
        
        .status-tag {
          padding: 2px 6px;
          border-radius: 3px;
          font-size: 10px;
          font-weight: 500;
          
          &.autoplay {
            background-color: #67c23a;
            color: white;
          }
          
          &.loop {
            background-color: #e6a23c;
            color: white;
          }
          
          &.muted {
            background-color: #f56c6c;
            color: white;
          }
        }
      }
    }
  }
  
  // 悬停效果
  &:hover {
    .video-container .video-info {
      opacity: 1;
    }
  }
}
</style>
